<template>
  <div class="body1">
    <div class="niu">
        <el-button type="primary" @click="goadd">添加</el-button>
    </div>
     
    <div style="padding:20px 20px 20px 20px;background:#fff;">
      <!-- <app-table :list="tableData3" :title="title"></app-table> -->
      <el-table :data="tableData3.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
        row-key="id" border lazy :load="load" 
        :tree-props="{children: 'son', hasChildren: 'hasChildren'}">
      <el-table-column prop="id" label="ID" width="180"></el-table-column>
      <el-table-column prop="name" label="菜单名称" width="180"></el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
      <el-table-column prop="pname" label="上级菜单"></el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
        
    </el-table>
    <el-pagination
      class="fen"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      :page-sizes="[2, 10, 20, 40]"      
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData3.length">
      </el-pagination>
    </div>
   </div>
  
</template>
 
<script>
export default {
  name: "Address",

  data() {
    return {
        title:{
          id:'ID',
          name:'菜单名称',
          path:'路径',
          pid:'父级id',
         
        },
      tableData3: [],
       currentPage:1, //初始页
        pagesize:10, //每页的数据
        show_page:true,
        nowpage:1,
        maxpage:10,
    };
  },
  methods: {
    goadd:function(){
      this.$router.push({path : "/add"})
      
    },
    getList() {
      this.$fetch('meau').then((res) => {
          console.log('111',res);
           this.tableData3=res.data;
      })
    },
    load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve()
        }, 1000)
      },
      handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
            this.currentPage = currentPage;
            console.log(this.currentPage)  //点击第几页
    },
  },
  created: function() {
    this.getList();
  }
};
</script>
<style>
.fen{text-align:center;}
.user {
  margin-bottom: 20px;
}
.bottm {
  background: #fff;
  display: flex;
  padding: 20px;
  border-radius: 4px;
  flex-direction: column;
  margin-top: 10px;
}
.inner {
  padding: 20px 20px 0 20px;
  border-radius: 5px;
}

.niu{
  display: flex;
  justify-content: flex-end;
  padding: 30px;
}
input {
  outline: none;
  display: block;
  width: 200px;
  height: 35px;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding-left: 10px;
}
.out {
  background: #fff;
  padding: 20px;
  display: flex;
}
.sou {
  border-radius: 4px;
  color: #fff;
  width: 100px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: coral;
}
.userout {
  align-items: center;
  margin-right: 30px;
  display: flex;
  flex-wrap: wrap;
}
.tabletitle{padding: 20px 20px 0 20px;}
</style>